<template>
	<view class="bg">
		<view class="login-backview">
			<view class="login-logo-view">
				<image class="login-logo-img" src="../../static/image/logo.png" mode="" />
				<view class="login-logo-chntitle">
					拼词之星
				</view>
				<view class="login-logo-engtitle">
					SPELLING STAR
				</view>
			</view>
			<view class="login-center-title">
				<view class="login-center-title1">
					WELCOME TO
				</view>
				<view class="login-center-title2">
					SPELLING STAR
				</view>
			</view>
			<view class="regist-backview">
				<!-- 输入手机号 -->
				<view v-if="signType === 1">
					<view class="input-view">
						<input class="phoneClass" v-model="phoneNumber" type="number" placeholder="请输入手机号"
							placeholder-class="placeClass" />
					</view>
					<view class="login-btns">
						<view class="login-menuview" @click="sendCodeClicked">
							验证码登录
						</view>
					</view>
				</view>
				
				<!-- 输入验证码 4位 -->
				<view v-else-if="signType === 2" class="getCode-backview">
					<view class="code_box">
						<view class="box_inp">
							<block v-for="(item,index) of 4" :key="item">
								<input type="number" :class="Showboxval.length === index && isFocus ? 'box_active' : ''"
									:value="Showboxval.length >= index + 1 ? Showboxval[index] : ''" disabled
									@click.stop="InputTap"></input>
							</block>
							<input type="number" :value="Showboxval" class="box_default" maxlength="4" :focus="isFocus"
								@input="FocuInput"></input>
						</view>
						<view class="phone-bottom-code" @click="sendCodeClicked">
							{{MoCodeMsg}}
						</view>
						<view class="login-menuview" @click="loginClicked">
							登录 | LOGIN
						</view>
					</view>
				</view>
				
				<!-- 输入密码 -->
				<view v-else-if="signType === 3">
					<view class="input-view">
						<input class="phoneClass" v-model="password" type="password" placeholder="请输入密码" placeholder-class="placeClass" />
					</view>
					<view class="login-menuview mt-20" @click="pwdLoginFn">
						登录 | LOGIN
					</view>
				</view>
				
				<!-- 隐私协议 -->
				<view class="agree">
					<view class="radio" @click="check = !check">
						<view class="radio-o" v-if="check"></view>
					</view>
					<view class="txt">
						同意<span @click="to1">《用户注册协议》</span>、<span @click="to2">《用户隐私政策》</span>
					</view>
				</view>
			</view>
			
			<!-- 更多登录方式 -->
			<view class="more-login" v-if="signType === 1">
				<view class="login-type" @click="handleToPwdLogin">
					<view class="icon">
						<image class="img" src="../../static/image/icon-pwd.png" mode="widthFix"></image>
					</view>
					密码登录
				</view>
				<view v-if="platform=='android'" class="login-type" @click="handleToFaceLogin">
					<view class="icon">
						<image class="img" src="../../static/image/icon-face.png" mode="widthFix"></image>
					</view>
					面容登录
				</view>
			</view>
			
			<!-- 稍后登录 -->
			<view class="login-action">
				<view @click="prev">{{ signType != 1 ? '< 上一步' : ''}}</view>
				<view @click="nologin">稍后登录 ></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				platform: '',
				phoneNumber: '',
				codeLength: 6, // 输入框个数
				Showboxval: '', // 输入的内容
				MoDisabled: false, //验证码状态
				MoCodeMsg: '获取验证码',
				MoMsgWait: 60, //时间秒
				MoColor: '#455AF7', //默认验证码字体颜色
				signType: 1,
				isFocus: '',
				check: false,
				codeArr: ['', '', '', '', '', ''],
				password: ''
			};
		},
		onLoad() {
			uni.clearStorage()
			uni.$emit("userInfoChange", true)
			const that = this
			uni.getSystemInfo({
				success: (info) => {
					const platform = info.platform.toLowerCase();
					that.platform = platform
				}
			})
		},
		onShow() {
			const that = this
			uni.setStorageSync('current_background_voice_type', '')
		},
		methods: {
			prev() {
				if (this.signType != 1) {
					this.signType = 1
				}
			},
			sendCodeClicked() {
				if (!this.check) {
					return uni.showToast({
						title: '请阅读并同意《用户注册协议》、《用户隐私政策》',
						icon: 'none'
					})
				}
				const phoneReg =
					/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(19[0-9]{1})|(16[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
				if (!phoneReg.test(this.phoneNumber)) {
					uni.showToast({
						title: '请输入正确的手机号！',
						icon: 'none',
						duration: 2000
					})
				} else {
					if (this.MoDisabled == true) {
						return;
					}
					this.sendSbinms();
			
				}
			},
			// 60秒后验证码/获取短信验证码接口
			sendSbinms: function() {
				// 发送短信成功
				this.$http.sendSmsCode({
					phone: this.phoneNumber
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '短信验证码发送成功，请注意查收',
							icon: 'none'
						})
						this.signType = 2
						this.isFocus = true
						var inter = setInterval(function() {
							this.MoCodeMsg = `重新发送验证码(${this.MoMsgWait})`
							this.MoMsgWait = this.MoMsgWait - 1
							this.MoDisabled = true
							if (this.MoMsgWait < 0) {
								clearInterval(inter)
								this.MoCodeMsg = '重新获取验证码'
								this.MoMsgWait = 60
								this.MoDisabled = false
							}
						}.bind(this), 1000);
					}
				})
			},
			//验证码输入框点击
			InputTap() {
				this.isFocus = false
				this.$nextTick(() => {
					this.isFocus = true;
				});
			},
			//验证码输入框
			FocuInput(e) {
				console.log(e)
				this.Showboxval = e.detail.value;
				console.log(this.Showboxval)
				if (this.Showboxval.length === 4) {
					setTimeout(() => {
						this.loginClicked()
					}, 200)
				}
			},
			
			loginClicked() {
				// 手机号验证码登录
				this.$http.appLogin({
					phone: this.phoneNumber,
					sms_code: this.Showboxval,
					login_type: 'code'
				}).then(res => {
					if (res.code === 200) {
						this.loginSuccessFn(res.data)
					} else {
						this.Showboxval = ''
						this.isFocus = true;
					}
				})
			},
			
			// 密码登录
			pwdLoginFn () {
				this.$http.appLogin({
					phone: this.phoneNumber,
					password: this.password,
					login_type: 'password'
				}).then(res => {
					if (res.code === 200) {
						this.loginSuccessFn(res.data)
					} else {
						this.password = ''
					}
				})
			},
			
			loginSuccessFn (data) {
				uni.setStorageSync('appEnterBackground', false);
							
				// 开关状态
				uni.setStorageSync('fayinguan_volume_status', true);
				uni.setStorageSync('yinyue_volume_status', true);
				uni.setStorageSync('yinxiao_volume_status', true);
				uni.setStorageSync('background_volume_of_menu_status', true);
				uni.setStorageSync('background_volume_of_rank_status', true);
				uni.setStorageSync('background_volume_of_game_status', true);
							
				// 音量大小
				uni.setStorageSync('fayinguan_volume_value', 0.7);
				uni.setStorageSync('yinyue_volume_value', 0.5);
				uni.setStorageSync('yinxiao_volume_value', 0.5);
				uni.setStorageSync('background_volume_of_menu', 0.5);
				uni.setStorageSync('background_volume_of_rank', 0.5);
				uni.setStorageSync('background_volume_of_game', 0.1);
							
				this.$loginSucc.setToken(data)
				this.$loginSucc.getUserInfo()
			},
			
			to1() {
				uni.navigateTo({
					url: '/pages/tabbar/userCenter/userAgreement'
				})
			},
			to2() {
				uni.navigateTo({
					url: '/pages/tabbar/userCenter/privacyPolicy'
				})
			},
			to3() {
				uni.navigateTo({
					url: '/pages/tabbar/userCenter/privacyPolicy'
				})
			},

			nologin() {
				uni.switchTab({
					url: "/pages/tabbar/home/index"
				})
			},

			
			// 手机号验证码登录
			fastLoginClicked: function() {
				uni.navigateTo({
					url: '/pages/login/smsCodeLogin/smsCodeLogin',
				})
			},
			
			handleToPwdLogin () {
				if (!this.check) {
					return uni.showToast({
						title: '请阅读并同意《用户注册协议》、《用户隐私政策》',
						icon: 'none'
					})
				}
				
				const phoneReg =
					/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(19[0-9]{1})|(16[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
				if (!phoneReg.test(this.phoneNumber)) {
					return uni.showToast({
						title: '请输入正确的手机号！',
						icon: 'none',
						duration: 2000
					})
				} 
				
				this.password = ''
				this.signType = 3
			},
			
			handleToFaceLogin() {
				var that = this;
			
				if (!this.check) {
					return uni.showToast({
						title: '请阅读并同意《用户注册协议》、《用户隐私政策》',
						icon: 'none'
					})
				}
				const phoneReg =
					/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(19[0-9]{1})|(16[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
				if (!phoneReg.test(this.phoneNumber)) {
					uni.showToast({
						title: '请输入正确的手机号！',
						icon: 'none',
						duration: 2000
					})
				} else {
					const params = {
						phone: that.phoneNumber
					}
					that.$http.checkFaceLogin(params).then(res => {
						if (res.code === 200) {
							uni.navigateTo({
								url: `/pages/tabbar/userCenter/baiduface?phone=${that.phoneNumber}`
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.regist-backview {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.regist-logo {
		width: 415rpx;
		height: 310rpx;
	}
	
	.input-view {
		width: 300px;
		height: 45px;
		margin-top: 30px;
		border-radius: 45px;
		// border: 4rpx solid #000;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.phoneClass {
		font-size: 18px;
		font-family: hzgb;
		text-align: center;
		color: #000;
	}
	
	.placeClass {
		font-size: 16px;
		text-align: center;
	}
	
	.phone-bottom-title {
		margin: 20rpx auto 60rpx;
		font-size: 24rpx;
		font-family: 'hzgb';
		text-align: center;
	}
	
	.phone-bottom-code {
		margin: 20rpx auto 60rpx;
		font-size: 14px;
		font-family: 'hzgb';
	}
	
	.login-menuview {
		background: linear-gradient(to bottom, #ffd16b, #fff497);
		border: 2px solid #ffd16b;
		width: 300px;
		height: 45px;
		border-radius: 24px;
		font-size: 16px;
		text-align: center;
		line-height: 43px;
		color: #000;
		font-family: 'hzgb';
		margin: 0 auto;
	}
	
	.login-btns {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
	}
	
	.login-menuview1 {
		flex: 1;
		width: auto;
		margin: 0 10px;
	}
	
	.getCode-backview {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.code_back {
		width: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}
	
	
	.shobox {
		width: 0;
		height: 0;
	}
	
	
	.code_box {
		margin: 86rpx 30rpx 0 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.code_box .box_inp {
		display: flex;
		align-items: center;
		position: relative;
	}
	
	.code_box .box_inp input:not(.box_default) {
		width: 45px;
		height: 45px;
		border: 2px solid #fff;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin-right: 4px;
		margin-left: 4px;
		font-size: 20px;
		font-family: hzgb;
	}
	
	.code_box .box_inp .box_active {
		border-color: #d4ac57 !important
	}
	
	.code_box .box_default {
		height: 100%;
		position: absolute;
		left: -80px;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(255, 0, 0, 0.3);
		opacity: 0;
	}
	
	.code_box .box_opt {
		font-size: 28rpx;
		color: #8B614D;
		text-align: center;
		margin: 20rpx 0 60rpx 0;
	}
	
	.code_box .box_opt.gray {
		color: #999;
	}
	
	.code_btn {
		margin: 0 60rpx;
	}
	
	.agree {
		display: flex;
		justify-content: flex-start;
		// width: 286px;
		margin-top: 16px;
		font-size: 14px;
	
		.radio {
			width: 16px;
			height: 16px;
			border-radius: 16px;
			border: 1px solid #fff;
			margin-top: 2px;
			margin-right: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			.radio-o {
				width: 8px;
				height: 8px;
				border-radius: 8px;
				background-color: #fff;
			}
		}
	
		.txt {
			flex: 1;
		}
	
		.txt span {
			text-decoration: underline;
			// color: #000;
		}
	}
	.bg {
		background: radial-gradient(circle, #373632, #140e01);
		color: #fff;
	}

	.login-backview {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: url(../../static/image/homePage/diwen.png);
		background-repeat: repeat-y;
		background-size: 100% auto;
	}

	.login-logo-view {
		width: 750rpx;
		margin-top: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.wechatbutton {
		width: 480rpx;
		height: 90rpx;
		border: 1rpx solid #000;
		border-radius: 45rpx;
		margin: 15rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 90rpx;
		font-family: hzgb;
	}

	.login-logo-img {
		width: 72px;
		height: 72px;
	}

	.login-logo-chntitle {
		width: 700rpx;
		font-size: 40rpx;
		margin: 14px 8px 8px;
		font-family: hzgb;
		text-align: center;
	}

	.login-logo-engtitle {
		width: 700rpx;
		font-size: 12px;
		font-family: hzgb;
		text-align: center;
	}

	.login-center-title {
		width: 700rpx;
		margin: 80rpx 80rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-weight: 900;
		font-family: hzgb;
	}

	.login-center-title1 {
		font-size: 35rpx;
	}

	.login-center-title2 {
		margin-top: 10px;
		font-size: 34px;
	}

	// .login-menuview {
	// 	background-color: black;
	// 	width: 480rpx;
	// 	height: 90rpx;
	// 	border-radius: 45rpx;
	// 	margin: 15rpx;
	// 	// font-size: 27rpx;
	// 	text-align: center;
	// 	line-height: 90rpx;
	// 	font-family: hzgb;
	// }

	.regis-menuview {
		width: 480rpx;
		height: 90rpx;
		border: 1rpx solid #000;
		border-radius: 45rpx;
		margin: 15rpx;
		font-size: 27rpx;
		text-align: center;
		line-height: 90rpx;
		font-family: hzgb;
	}

	.wechat-Login-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;
	}

	.WechatLogin-btn {
		margin-top: 60rpx;
		background: rgba(0, 0, 0, 0);
	}

	button[class="WechatLogin-btn"]::after {
		border: 0;
	}

	.WechatLogin-img {
		width: 100rpx;
		height: 100rpx;
	}

	.wechatLogin-title {
		width: 100%;
		text-align: center;
	}

	.login-action {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 4px;
		position: absolute;
		bottom: 16px;
		right: 20px;
		left: 20px;
		padding: 4px 0;
		font-size: 14px;
	}
	.more-login{
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 80px;
		right: 0;
		left: 0;
		.login-type{
			margin: 0 20px;
			font-size: 12px;
			font-family: hzgb;
			display: flex;
			flex-direction: column;
			align-items: center;
			.icon{
				width: 40px;
				height: 40px;
				background: linear-gradient(to bottom, #ffd16b, #fff497);
				border: 2px solid #ffd16b;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 6px;
				.img{
					width: 22px;
				}
			}
		}
	}
	
	.mt-20{
		margin-top: 20px;
	}
</style>